<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>面板示例</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
</head>
<body>
	<h2>消息框</h2>
	<h3>说明:</h3>
	<span>消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<a class="hisui-linkbutton" iconCls="icon-w-save" id="alert1">提示info</a>
		<a class="hisui-linkbutton" iconCls="icon-w-cancel" id="alert2">失败error</a>
		<a class="hisui-linkbutton" iconCls="icon-w-ok" id="alert3">成功success</a>
		<a class="hisui-linkbutton" iconCls="icon-w-save" id="confirm1">confirm</a>
		<a class="hisui-linkbutton" iconCls="icon-w-edit" id="prompt1">prompt</a>
		<a class="hisui-linkbutton" iconCls="icon-w-import" id="progress1">progress</a>
		<!--<a class="hisui-linkbutton" iconCls="icon-w-paper" id="show1">show</a>-->
		<script>
			$(function () {
				$('#alert1').click(function () {
					$.messager.alert("简单提示", "请求超出预计时间，可能网络异常,请检查网络或联系管理员。", 'info');
				});
				$('#alert2').click(function () {
					$.messager.alert("简单提示", "数据请求失败，请根据以下提示来完成该操作。<p>检查网线是否与电脑正常连接</p><p>请进入网络和Internet界面检查电脑IP地址与网关是否设置正确</p><p>不解决联系管理员</p>", 'error');
				});
				$('#alert3').click(function () {
					$.messager.alert("简单提示", "支付成功", 'success');
				});
				$('#confirm1').click(function () {
					$.messager.confirm("删除", "确定提交并保存?", function (r) {
						if (r) {
							$.messager.popover({msg:"点击了确定",type:'info'});
						} else {
							$.messager.popover({msg:"点击了取消"});
						}
					});
				})
				$('#prompt1').click(function () {
					$.messager.prompt("提示", "修改前请签名：", function (r) {
						if (r) {
							$.messager.popover({msg:"你的签名是：" + r,type:'info'});
						} else {
							$.messager.popover({msg:"点击了【取消】或输入为空"});
						}
					});
				})
				$('#progress1').click(function () {
					$.messager.progress({
						title: "提示",
						msg: '正在导入数据',
						text: '导入中....'
					});
					setTimeout('$.messager.progress("close");', 4 * 1000);
				})
				
				$('#show1').click(function () {
					$.messager.show({
						title: '标题',
						msg: '3秒后会自动关闭',
						timeout: 3000,
						showType: 'slide'/*,
						style:{
							right:'',
							top:document.body.scrollTop+document.documentElement.scrollTop,
							bottom:''
						}*/
					});
				});
			})
		</script>

<pre class="prettyprint lang-html hide"><code>&lt;a class="hisui-linkbutton" iconCls="icon-w-save" id="alert1"&gt;提示info&lt;/a&gt;
&lt;a class="hisui-linkbutton" iconCls="icon-w-cancel" id="alert2"&gt;失败error&lt;/a&gt;
&lt;a class="hisui-linkbutton" iconCls="icon-w-ok" id="alert3"&gt;成功success&lt;/a&gt;
&lt;a class="hisui-linkbutton" iconCls="icon-w-save" id="confirm1"&gt;confirm&lt;/a&gt;
&lt;a class="hisui-linkbutton" iconCls="icon-w-edit" id="prompt1"&gt;prompt&lt;/a&gt;
&lt;a class="hisui-linkbutton" iconCls="icon-w-import" id="progress1"&gt;progress&lt;/a&gt;
&lt;script&gt;
	$(function () {
		//alert第三入参info,question,warning,error,success
		$('#alert1').click(function () {
			$.messager.alert("简单提示", "请求超出预计时间，可能网络异常,请检查网络或联系管理员。", "info");
		});
		$('#alert2').click(function () {
			$.messager.alert("简单提示", "数据请求失败，请根据以下提示来完成该操作。
			&lt;p&gt;检查网线是否与电脑正常连接&lt;/p&gt;
			&lt;p&gt;请进入网络和Internet界面检查电脑IP地址与网关是否设置正确&lt;/p&gt;
			&lt;p&gt;不解决联系管理员&lt;/p&gt;", "error");	
		});
		$('#alert3').click(function () {
			$.messager.alert("简单提示", "支付成功", 'success');
		});
		$('#confirm1').click(function () {
			$.messager.confirm("删除", "确定提交并保存?", function (r) {
				if (r) {
					$.messager.popover({msg:"点击了确定",type:'info'});
				} else {
					$.messager.popover({msg:"点击了取消"});
				}
			});
		});
		$('#prompt1').click(function () {
			$.messager.prompt("提示", "修改前请签名：", function (r) {
				if (r) {
					$.messager.popover({msg:"你的签名是：" + r,type:'info'});
				} else {
					$.messager.popover({msg:"点击了【取消】或输入为空"});
				}
			});
		});
		$('#progress1').click(function () {
			$.messager.progress({
				title: "提示",
				msg: '正在导入数据',
				text: '导入中....'
			});
			setTimeout('$.messager.progress("close");', 4 * 1000);
		});
	})
&lt;/script&gt;</code></pre>
	</div>
	<h3>基于messager的简单提示方法(<code>$.messager.popover</code>)</h3>
	<div class="demo-exp-code entry-content">
		<a href="#" class="hisui-linkbutton" id='succ'>success</a>
		<a href="#" class="hisui-linkbutton" id='info'>info</a>
		<a href="#" class="hisui-linkbutton" id='alert'>alert</a>
		<a href="#" class="hisui-linkbutton" id='error'>error</a>
		<script>
			$(function () {
				$('#succ').click(function(){
					$.messager.popover({
						msg: '保存成功！',
						type:'success',
						timeout: 2000, 		//0不自动关闭。3000s
						showType: 'slide'  //show,fade,slide
	                });
				});
				$('#info').click(function(){
					$.messager.popover({
						msg: '简单提示！',
						type:'info',
						timeout: 2000, 		//0不自动关闭。3000s
						showSpeed:'slow', //fast,slow,normal,1500
						showType: 'fade'  //show,fade,slide
					});
				});
				$('#alert').click(function(){
					$.messager.popover({
						msg: '简单警示！',
						type:'alert'
					});
				});
				$('#error').click(function(){
					$.messager.popover({
						msg: '保存失败！',
						type:'error',
						style:{
							bottom:-document.body.scrollTop - document.documentElement.scrollTop+10,
							right:10
						}
					});
				});
			})
		</script>

<pre class="prettyprint lang-html hide"><code>&lt;a href="#" class="hisui-linkbutton" id='succ'>success&lt;/a>
&lt;a href="#" class="hisui-linkbutton" id='info'>info&lt;/a>
&lt;a href="#" class="hisui-linkbutton" id='alert'>alert&lt;/a>
&lt;a href="#" class="hisui-linkbutton" id='error'>error&lt;/a>
&lt;script>
	$(function () {
		$('#succ').click(function(){
			$.messager.popover({msg: '保存成功！',type:'success',timeout: 1000});
		});
		$('#info').click(function(){
			$.messager.popover({msg: '简单提示！',type:'info',timeout: 2000,showType: 'show'});
		});
		$('#alert').click(function(){
			$.messager.popover({msg: '简单警示！',type:'alert'});
		});
		$('#error').click(function(){
			$.messager.popover({
				msg: '保存失败！',
				type:'error',
				style:{
					bottom:-document.body.scrollTop - document.documentElement.scrollTop+10, //显示到右下角
					right:10
				}
			});
		});
	});
&lt;/script&gt;</code></pre>
	</div>
	<table class="table">
		<tr class="protitle">
			<th>$.messager.popover属性</th>
			<th>说明</th>
			<th>默认值</th>
			<th></th>
		</tr>
		<tr>
			<td>msg</td>
			<td>提示内容</td>
			<td>''</td>
			<td></td>
		</tr>
		<tr>
			<td>type</td>
			<td>提示类型</td>
			<td>'error'</td>
			<td>决定显示的提示样式，可选属性,'success','info','alert','error'</td>
		</tr>
		<tr>
			<td>timeout</td>
			<td>显示时间长度(毫秒)/td>
			<td>3000</td>
			<td>0表示一直显示不消失。</td>
		</tr>
		<tr>
			<td>showSpeed</td>
			<td>显示速度</td>
			<td>'fast'</td>
			<td>可选属性,'fast','slow','normal',数字(毫秒数)</td>
		</tr>
		<tr>
			<td>showType</td>
			<td>显示方式</td>
			<td>'slide'</td>
			<td>可选属性,'slide','fade','show'</td>
		</tr>
		<tr>
			<td>style</td>
			<td>显示位置</td>
			<td>顶部中间位置</td>
			<td>right,top,left,bottom</td>
		</tr>
	</table>
	<prettyprint/>
</body>

</html>